<template>
    <div style="width:100%">
        <h4>偏严指标设置</h4>
        <div class="item-content">
            <span> 是否偏严： </span>
            <el-radio-group v-model="setInfo.sirict">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
            </el-radio-group>
        </div>
        <h4>自动发送/关闭设置</h4>
        <div class="item-content">
            <span> 自动发送： </span>
            <el-radio-group v-model="setInfo.autoApprove">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
            </el-radio-group>
            <span style="margin-left:100px"> 自动关闭： </span>
            <el-radio-group v-model="setInfo.autoClose">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
            </el-radio-group>
        </div>

        <h4>连续违规处置流程设置</h4>
        <div class="item-content">
            <el-button size="mini" type="primary" @click="handleBtn('add')" class="btn">新增设置</el-button>
            <div v-for="(item, index) in transfiniteTypes" :key="index">
                <div class="item-type">
                    <i class="el-icon-error" circle type="primary" size="mini" @click="handleBtn('delete', { item, index })"> </i>
                    &nbsp;
                    <span>超限类型 </span>
                    &nbsp; &nbsp;
                    <el-select v-model="item.overrunType" size="mini" class="item" clearable filterable style="width:130px">
                        <el-option v-for="(value, key) in typeOptions" :key="key" :value="key" :label="value"></el-option>
                    </el-select>
                    <el-input
                        style="max-width:80px;margin:0 10px"
                        v-model="item.overrunValue"
                        clearable
                        size="mini"
                        @input="item.overrunValue = item.overrunValue.replace(/^(0+)|[^\d]+/g, '')"
                    ></el-input>
                    <span>{{ item.overrunType == '1' ? '%' : '天' }}</span>
                    &nbsp; 通知组：
                    <el-select
                        v-model="item.userGroupNoticeCodes"
                        size="mini"
                        class="item"
                        clearable
                        filterable
                        multiple
                        collapse-tags
                        style="width:150px"
                    >
                        <el-option
                            v-for="item in computedUserGroupNoticeCodes(item.userGroupNoticeCodes)"
                            :key="item.userGroupNoticeCode"
                            :value="item.userGroupNoticeCode"
                            :label="item.noticeName"
                        ></el-option>
                    </el-select>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { changeOptions } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({ name: 'BatchSetContent', components: {} })
export default class BatchSetContent extends Vue {
    @Prop() infoGroupOptions: any;
    @Prop() overrunInfo: any;
    visibleTemp: boolean = false;
    setInfo: any = {
        sirict: '0',
        autoApprove: '1',
        autoClose: '1',
    };
    transfiniteTypes: any = [
        // key值有待确认
        {
            overrunType: '0',
            overrunValue: '1',
            userGroupNoticeCodes: [],
        },
        {
            overrunType: '1',
            overrunValue: '80',
            userGroupNoticeCodes: [],
        },
        {
            overrunType: '2',
            overrunValue: '2',
            userGroupNoticeCodes: [],
        },
    ];
    typeOptions: any = {
        '0': '连续超限天数',
        '1': '调整期系数',
        '2': '距调整期前N天',
    };

    // 已选项前置
    computedUserGroupNoticeCodes(values: any) {
        let arr = changeOptions(values, this.infoGroupOptions, 'userGroupNoticeCode');
        return arr;
    }

    @Watch('overrunInfo', { deep: true, immediate: true })
    onWatchOverrunInfo(newData, oldData) {
        console.log(newData, oldData, 'oldData');
        if (newData != oldData) {
            const obj = newData;
            console.log(this.overrunInfo, 'overrunInfo');
            console.log(this.transfiniteTypes, 'transfiniteTypes');
            if (obj) {
                this.transfiniteTypes = obj.flowSettingPOList || [];
                this.setInfo = {
                    sirict: obj.sirict,
                    autoApprove: obj.autoApprove,
                    autoClose: obj.autoClose,
                };
            }
        } else if (!newData) {
            // 批量修改：overrunInfo新旧值均为undefined
            this.handleDefaultManager();
        }
    }

    /**
     * 处理默认的投资经理
     */
    handleDefaultManager() {
        const obj = this.infoGroupOptions.find(item => item.noticeName == '投资经理组');
        if (obj) {
            this.transfiniteTypes.map(item => (item.userGroupNoticeCodes = [obj.userGroupNoticeCode]));
        }
    }
    /**
     * 按钮点击
     */
    async handleBtn(type: string, $event?: any) {
        if (type == 'add') {
            this.transfiniteTypes.push({
                overrunType: '',
                overrunValue: '',
                userGroupNoticeCodes: [],
            });
        } else if (type == 'delete') {
            let { item, index } = $event;
            this.transfiniteTypes.splice(index, 1);
        }
    }

    /**
     * 重置请求参数
     */
    resetParams() {
        this.setInfo = {
            sirict: '0',
            autoApprove: '1',
            autoClose: '1',
        };
        this.transfiniteTypes = [];
    }
}
</script>
<style lang="scss" scoped>
.item-content {
    margin: 10px;
    .btn {
        margin: 10px 0;
    }

    .item-type {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .el-icon-error {
            color: #ff4c4c;
            font-size: 18px;
        }
    }
}
.dialog-footer {
    margin-right: 20px;
    text-align: right;
}
/deep/ .el-select__tags {
    flex-wrap: nowrap;

    .el-tag.el-tag--info {
        display: flex;
        align-items: center;

        .el-select__tags-text {
            display: block;
            font-size: 12px;
            max-width: 58px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
